<template>
  <t-dialog
    :header="header"
    placement="center"
    :visible.sync="visible"
    @confirm="onSubmit"
    :onClose="closeDialog"
    width="80%"
    :closeOnEscKeydown="false"
    :closeOnOverlayClick="false"
    :footer="edit"
  >
    <t-form :data="formData" labelWidth="120px" :rules="rules" ref="form">
      <t-form-item label="表单名称" name="name">
        <t-input v-if="edit" v-model="formData.name" placeholder="请输入表单名称"></t-input>
        <span v-else>{{formData.name}}</span>
      </t-form-item>
      <t-form-item label="表单编号" name="code">
        <t-input v-if="edit" v-model="formData.code" placeholder="请输入表单编号"></t-input>
        <span v-else>{{formData.code}}</span>
      </t-form-item>
      <t-form-item label="序号" name="sort">
        <t-input-number v-if="edit" v-model="formData.sort" theme="column" align="center" :max="100" :min="0"></t-input-number>
        <span v-else>{{formData.sort}}</span>
      </t-form-item>
      <t-form-item label="统计范围" name="statisticalRange">
        <t-textarea
          v-if="edit"
          :autosize="{ minRows: 3, maxRows: 5 }"
          v-model="formData.statisticalRange"
          placeholder="请输入统计范围"
          name="statisticalRange"
        />
        <span v-else>{{formData.statisticalRange}}</span>
      </t-form-item>
      <t-form-item label="报送单位" name="submittedUnit">
        <t-textarea
          v-if="edit"
          :autosize="{ minRows: 3, maxRows: 5 }"
          v-model="formData.submittedUnit"
          placeholder="请输入报送单位"
          name="submittedUnit"
        />
        <span v-else>{{formData.submittedUnit}}</span>
      </t-form-item>
      <t-form-item label="报送方式及日期" name="submittedDate">
        <t-textarea
          v-if="edit"
          :autosize="{ minRows: 3, maxRows: 5 }"
          v-model="formData.submittedDate"
          placeholder="请输入报送方式及日期"
          name="submittedDate"
        />
        <span v-else>{{formData.submittedDate}}</span>
      </t-form-item>
    </t-form>
  </t-dialog>
</template>

<script>
export default {
  name: 'edit-table-info',
  props: ['tableId', 'edit'],
  data() {
    return {
      visible: true,
      header: '修改表单信息',
      formData: {},
      rules: {
        name: [{ required: true, message: '表单名称必填', type: 'error' }],
        code: [{ required: true, message: '表单编号必填', type: 'error' }],
        sort: [{ required: true, message: '表单序号必填', type: 'error' }],
        statisticalRange: [{ required: true, message: '表单统计范围必填', type: 'error' }],
        submittedUnit: [{ required: true, message: '表单报送单位必填', type: 'error' }],
        submittedDate: [{ required: true, message: '表单报送方式及日期必填', type: 'error' }],
      },
    };
  },
  created() {
    if (this.tableId === -1) {
      this.header = '添加表单';
    } else {
      this.header = '修改表单信息';
      this.getTableDetail();
    }
  },
  methods: {
    async getTableDetail() {
      const { data } = await this.$api.kjtjdc.table.getTableInfoById(this.tableId);
      this.formData = {
        id: data.id,
        name: data.name,
        code: data.code,
        sort: data.sort,
        statisticalRange: data.statisticalRange,
        submittedUnit: data.submittedUnit,
        submittedDate: data.submittedDate,
      };
    },
    async onSubmit() {
      const res = await this.$refs.form.validate();
      if (res) {
        if (this.tableId === -1) {
          const { code } = await this.$api.kjtjdc.table.addTable(this.formData);
          if (code === 200) {
            this.$message.success('添加表单成功');
          }
        } else {
          const { code } = await this.$api.kjtjdc.table.updateTableInfo(this.formData);
          if (code === 200) {
            this.$message.success('修改表单信息成功');
          }
        }
        this.$emit('update:visible', false);
        this.$emit('reload');
      } else {
        this.$message.warning('请完善信息');
      }
    },
    closeDialog() {
      this.$emit('update:visible', false);
    },
  },
};
</script>

<style lang="less" scoped>
.t-form {
  max-height: 70vh;
  overflow: auto;
  padding-right: 10px;
}
.t-form::-webkit-scrollbar {
    width: 7px;
    background: rgb(0 0 0 / 1%);
}
.t-form::-webkit-scrollbar-thumb {
    border-radius: 6px;
    border: 4px solid rgb(0 0 0 / 10%);
    background-clip: content-box;
    background-color: rgb(0 0 0 / 10%);
}
</style>
